<template>
    <div>
        <cus-modal
            ref="modal"
            :title="`${ days[nums.indexOf(form.key2)] } ( ${ form.mealTimeName } ) 替换菜肴`"
            :width="1100"
            :closable="false"
            @on-visible-change="onVisibleChange"
        >
            <div class="noticeBox">
                <Spin size="large" fix v-if="form.loading"> </Spin>
                <div style="display:flex">
                    <Input v-model="form.name" style="width: 200px" placeholder="请填写菜品名称" class="mr_24" clearable></Input>
                    <cusButton class="mr_10" type="primary" @onClick="selectailocalfoodBydishApi">查询</cusButton>
                </div>
                <div style="margin-top:20px">
                    <Tabs type="card" ref="tabs">
                        <TabPane :label="form.dishType" :name="form.dishType">
                            <div class="dishesBox">
                                <div class="dishesItem" :class="item.select ? 'selectDishes' : ''" v-for="(item, index) in data" :key="index" @click="chooseItem(index)">{{ item.dishName }}{{ item.select ? '(替换)' : ''}}</div>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
            <div slot="footer">
                <slot name="footer">
                    <div class="modal-footer">
                        <cus-button
                            size="small"
                            class="mr_2"
                            @onClick="onCancel"
                            >取消</cus-button
                        >
                        <cus-button type="primary" size="small" @onClick="onOk">确认替换</cus-button>
                    </div>
                </slot>
            </div>
        </cus-modal>
    </div>
</template>

<script>
import { selectailocalfoodBydish } from "@/api/business/dishesModule";

export default {
    components: {},
    name: "changeOneDishes",
    data() {
        return {
            days: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            form: {
                key: 'breakfast',
                key2: 'one',
                mealTimeName: '早餐',
                arrIndex: 0,
                name: '',
                loading: false,
                dishType: ""
            },
            data: [], // 菜品列表
            mealTimeList: [
                { label: 'breakfast', name: '早餐' },
                { label: 'betwwenMealOne', name: '早~午间餐' },
                { label: 'lunch', name: '午餐' },
                { label: 'betwwenMealTwo', name: '午~晚间餐' },
                { label: 'supper', name: '晚餐' },
                { label: 'midnightMealOne', name: '夜餐1' },
                { label: 'midnightMealTwo', name: '夜餐2' }
            ],
            nums: ['one', 'two', 'three', 'four', 'five', 'six', 'seven']
        };
    },
    mounted() {
       
    },
    methods: {
        onVisibleChange(v) {
            if(!v) {
                this.data = [];
                this.form = {
                    key: 'breakfast',
                    key2: 'one',
                    arrIndex: 0,
                    mealTimeName: '早餐',
                    name: '',
                    loading: false,
                    dishType: ""
                }
            }
        },     
        show(row) {
            this.$refs["modal"].show = true;
            if (row) {
                console.log(row)
                let rowA = this.$cu.deepClone(row);
                this.form.key = rowA.key;
                this.form.key2 = rowA.key2;
                this.form.arrIndex = rowA.arrIndex;
                this.form.mealTimeName = this.mealTimeList.filter(item => item.label == row.key)[0].name;
                this.form.dishType = rowA.dishType;
                //每次打开的时候，设置激活的tab是第一个
                this.$refs.tabs.activeKey = rowA.dishType;
                this.selectailocalfoodBydishApi()
            }
        },
        onInit() {

        },
        // 确认发布
        onOk() {
            let filArr = this.data.filter(item => item.select);
            if(filArr.length > 0) {
                this.$emit('onAdd', this.form, filArr[0]);
                this.$refs["modal"].show = false;
            } else {
                this.$Message.warning('请选择您要替换的菜品.')
            }
        },
        //模态框取消
        onCancel() {
            this.$refs["modal"].show = false;
        },
        // 根据菜品分类获取菜品
        selectailocalfoodBydishApi() {
            this.form.loading = true;
            return new Promise((resolve) => {
                selectailocalfoodBydish({
                    dishType: this.form.dishType,
                    dishName: this.form.name
                }).then((res) => {
                    this.form.loading = false;
                    if (res.retCode == 2000) {
                        this.data = res.data;
                        resolve();
                    }
                });
            });
        },
        // 选中菜肴
        chooseItem(index){{
            this.data.forEach((item, idx) => {
                if(index == idx) {
                    this.$set(this.data[idx], 'select', true)
                } else {
                    this.$set(this.data[idx], 'select', false)
                }
            })
        }}
    },
};
</script>

<style scoped lang="less">
/deep/.ivu-modal-mask {
    z-index: 999999!important;
}
/deep/.ivu-modal-wrap {
    z-index: 999999!important;
}
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width:4px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,255,255,0.4);
}
.noticeBox {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
}
.dishesBox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: start;
    border: 1px solid #d7dde4;
    padding: 10px;
    height: 200px;
    overflow: hidden;
            overflow-y: auto;
}
.dishesItem {
    margin: 0 16px 16px 0;
    color: #1890ff;
    cursor: pointer;
}
.selectDishes {
    color: aquamarine;
}
</style>
